<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>canvas</title>
    <script src="./js/initShader.js"></script>
  </head>
  <body>
    <canvas id="gl-canvas" width="500" height="500">
      Please use a browser that supports "canvas".
    </canvas>
    <script>
      var canvas = document.getElementById("gl-canvas");
      var gl = canvas.getContext("webgl");

      // 定义顶点着色器
      var VSHADER_SOURCE = `
        attribute vec2 position;
        void main(){
            gl_PointSize = 1.0;
            gl_Position = vec4(position,0.0,1.0);
        }
      `;

      // 定义片元着色器
      var FSHADER_SOURCE = `
        precision mediump float;
        void main(){
            gl_FragColor = vec4(1.0,0.0,0.0,1.0);
        }
      `;
    //   // 初始化着色器
    //   function initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE) {
    //     var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    //     gl.shaderSource(vertexShader, VSHADER_SOURCE);
    //     gl.compileShader(vertexShader);

    //     var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    //     gl.shaderSource(fragmentShader, FSHADER_SOURCE);
    //     gl.compileShader(fragmentShader);

    //     var program = gl.createProgram();
    //     gl.attachShader(program, vertexShader);
    //     gl.attachShader(program, fragmentShader);
    //     gl.linkProgram(program);
    //     gl.useProgram(program);
    //     return program;
    //   }

      // 创建着色器程序
     const program1 =  initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE);
      // 假设已经完成了着色器的初始化，并且gl是有效的WebGL上下文

    //   //创建一个三角形坐标数据,并存入缓冲区
    //     const triangle = new Float32Array([-1, -1, 0, 1, 1, -1]);
    //     const bufferId = gl.createBuffer();
    //     gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
    //     gl.bufferData(gl.ARRAY_BUFFER, triangle, gl.STATIC_DRAW);

    //     //获取顶点着色器的position的变量位置下标
    //     const vPosition = gl.getAttribLocation(program1, "position");
    //     console.log(vPosition);
    //     gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);//从bindBuffer绑定的缓冲区中读取数据
    //     gl.enableVertexAttribArray(vPosition);//激活这个变量

    //     gl.clear(gl.COLOR_BUFFER_BIT);
    //     gl.drawArrays(gl.TRIANGLES, 0, triangle.length / 2);

      // 定义三角形的顶点位置
        var vertices = [-0.5, -0.5, 0.0, 0.5, -0.5, 0.0, 0.0, 0.5, 0.0];

        // 创建缓冲区对象
        var vertexBuffer = gl.createBuffer();

        // 将缓冲区对象绑定到目标
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

        // 向缓冲区写入数据
        gl.bufferData(
          gl.ARRAY_BUFFER,
          new Float32Array(vertices),
          gl.STATIC_DRAW
        );

        // 获取attribute变量的存储位置
        var a_position = gl.getAttribLocation(program1, "position");
        console.log(a_position);

        // 将缓冲区对象分配给a_position变量
        gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);

        // 连接a_position变量与分配给它的缓冲区对象
        gl.enableVertexAttribArray(a_position);

        // 清除颜色缓冲区
      //   gl.clearColor(0.0, 0.0, 0.0, 1.0); // 设置清空屏幕的颜色为黑色，不透明
        gl.clear(gl.COLOR_BUFFER_BIT); // 执行清空操作

        // 绘制三角形
        gl.drawArrays(gl.TRIANGLES, 0, 3); // 使用TRIANGLES模式绘制3个顶点
    </script>
  </body>
</html>
